<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>微信接口-登录</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<jsp:include page="iconfont/iconfont.jsp" flush="true"/><!--动态包含-->
		<!--css,js-->
		<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.10.2.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/user.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/jquery.pagination.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/layer/layer.js'/>"></script>
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/js/layer/skin/layer.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/pagination.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/style.css'/>">
		<style>
			.pay-wrap .p-cart-title{
				background:url(<c:url value='/resources/images/cart-header-bg.jpg'/>);
				height:130px;
			}

			.p-cart-title h1{
				line-height: 100px;
    			margin-left: 50px;
			}
			.p-body  .p-style{
				padding: 30px 0;
    			border-top: 1px solid #e5e5e5;
			}
			.p-style ul li{
				float:left;
				width: 236px;
    			height: 86px;
    			margin-right: 20px;
    			cursor: pointer;
    			background-image: url("<c:url value='/resources/images/pay_s.png'/>");
    			background-color: #f8fafc;
    			border: 1px solid #f8fafc; 
			}
			.p-style ul li:hover{
				border-color:red; 
			}
			.p-body{
				margin: 0 auto;
			    width: 1104px;
			    padding: 0 36px 48px;
			    box-shadow: 0 0px 8px rgba(7, 17, 27, 0.2);
			    margin-top: -40px;
			    background-color: #fff;
			}
			.p-body .p-title{padding: 30px 0;}
			.alipay{
				background-position: 55px -301px;
    			background-repeat: no-repeat;
			}
			.wxpay{
				background-position: 48px -422px;
    			background-repeat: no-repeat;
			}
			.p-b-box{
				float:right;
			}
			.pay-fee{
				color:red;
			}
			.p-body .p-btn{
				padding: 60px 0;
				border-top: 1px solid #e5e5e5;
			}
			.pay-button-box a{
				padding: 10px 0;
			    display: block;
			    text-align: center;
			    background: red;
			    color: #fff;
			}
			.p-style ul li.active{
				border-color: red;
			}
			.layer-window{
				padding:20px 0;
			}
			.layer-window h3{
				font-size: 16px;
			}
			.layer-window p{
				font-size: 14px;
			}
			.layer-window>h3,p{
				padding: 6px 35px;
    			text-align: center;
			}
			.layui-layer-btn .layui-layer-btn0{
				border:none;
				color:#fff;
			}
			.layui-layer-btn a{
				border:none;
				background: red;
				color:#fff;
				height: 38px;
   				line-height: 38px;
			}
			.layui-layer-iframe .layui-layer-btn, .layui-layer-page .layui-layer-btn{
				text-align: center;
			}
		</style>
	</head>
<body>
	<div class="pay-wrap">
	

	<div class="p-cart-title">
		<h1>支付中心</h1>
	</div>

	<div class="p-body">
		<div class="p-title">
			<span class="orderinfo">订单：16232565325365</span>
		</div>
		<div class="p-style">
			<div style="height: 36px;">支付方式</div>
			<ul>
				<li class="wxpay active"></li>
				<li class="alipay"></li>
				<div style="clear:both;"></div>
			</ul>
		</div>
		<div class="p-btn">
			<p style="float: left;color: orange;"><i class="iconfont icon-gantanhao" style="font-size: 18px;margin-right:10px;"></i>请在 24小时 以内支付完成，如未完成此订单将自动关闭。需重新购买！</p>
			<div class="p-b-box">
				<p><span>应付金额：</span><span class="pay-fee"><i style="font-style: normal;">￥</i><span style="font-size:18px;font-weight: 600;">120.00</span></span></p>
				<p class="pay-button-box">
					<a href="#" class="nowPay">立即支付</a>
				</p>
				<div style="clear:both;"></div>
			</div>
		</div>

	</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$(".p-style ul li").on("click",function(){
				$(this).addClass("active").siblings().removeClass("active");
			});


			$(".pay-button-box .nowPay").on("click",function(){

				layer.open({
				  title:false,
				  type: 1,
				  skin: 'layui-layer-demo', //样式类名
				  closeBtn: 0, //不显示关闭按钮
				  shift: 2,
				  shadeClose: false, //开启遮罩关闭
				  content: '<div class="layer-window"><h3>请在新打开的页面完成支付</h3><p>支付前完成请不要关闭窗口</p><p class="error js-error" style="color:red;"></p></div>',
				  btn: ['重新选择支付方式', '支付完成'],
				  yes:function(index){
				  	console.log(222);
				  	layer.close(index);
				  },
				   btn2: function(index, layero){
				   	console.log(888);
				   	var flag=false;///判断是否支付成功！-未支付成功
				   	if(!flag){
				   		$(".js-error").text("未支付成功，请在支付页面继续完成支付！");
				   		return false;
				   	}else{
				   		console.log("支付成功");
				   		layer.close(index);
				   	}
				  	
				  }
				});

			})
				
			
		});
	</script>
</body>
</html>
